import React from 'react';
import MainUI from '../../components/layout/MainUI';
import AddCustomerTypeModalUI from '../../components/system/customerType/AddCustomerTypeModalUI';
import EditCustomerTypeModalUI from '../../components/system/customerType/EditCustomerTypeModalUI';
import {connect} from 'dva';
import {
  Breadcrumb,
  Button,
  Col,
  Popconfirm,
  Row,
  Table,
  message,
  Dropdown,
  Menu,
  Icon
} from 'antd';

class CustomerType extends React.Component {

  state = {
    columns: [
      {title: '类型名称', dataIndex: 'name',},
      {title: '折扣  (实价=原价x折扣)', dataIndex: 'discount',},
      {
        title: '操作', render: (text, row, index) => {
        const menu = <Menu>
          <Menu.Item key={"edit" + row.id}>
            <Button icon="edit" size="small" onClick={() => {
              this.editModalVisiblefuc(true,row);
            }}>修改</Button>
          </Menu.Item>
          <Menu.Divider/>
          <Menu.Item key={"delete" + row.id}>
            <Popconfirm title="你确定要进行删除操作?" onConfirm={() => {
              this.delete(row);
            }} okText="是" cancelText="否">
              <Button type='danger' icon="delete" size="small">删除</Button>
            </Popconfirm>
          </Menu.Item>
        </Menu>;
        return <Dropdown overlay={menu} trigger={['click']}>
          <a className="ant-dropdown-link" href="#">
            菜单 <Icon type="down"/>
          </a>
        </Dropdown>

      }
      },
    ],
    addModalVisible: false,
    editModalVisible: false,
    editRow:undefined,
  };
  search = () => {
        this.props.dispatch({
          type: 'customerType/e_getCustomerTypes'
        });
  };

  addModalVisiblefuc = (bool) => {
    const state = this.state;
    state.addModalVisible = bool;
    this.setState(state);
  };

  editModalVisiblefuc = (bool,editRow) => {
    const state = this.state;
    state.editModalVisible = bool;
    state.editRow=editRow;
    this.setState(state);
  };

  delete = (row) => {
    if (row != undefined || row != null) {
      const ids = [row.id];
      this.props.dispatch({
        type: 'customerType/e_deleteCustomerType',
        payload: {ids: ids}
      });
    } else {
      message.warning('请选择需要删除的数据！');
    }
  };

  render() {

    return (
      <MainUI>
        <Breadcrumb style={{margin: '12px 0'}}>
          <Breadcrumb.Item>功能管理</Breadcrumb.Item>
          <Breadcrumb.Item> 门店管理</Breadcrumb.Item>
          <Breadcrumb.Item> 会员类型</Breadcrumb.Item>
        </Breadcrumb>
        <div style={{padding: 24, background: '#fff', minHeight: 360}}>
          <Row>
            <Col span={24} style={{textAlign: 'right'}}>
              <Button type="primary" icon="retweet" onClick={() => {
                this.search();
              }}>刷新</Button><span className="ant-divider"/>
              <Button onClick={() => {
                this.addModalVisiblefuc(true)
              }}>新增</Button>
            </Col>
          </Row>
          <Row>
            {
              <Table bordered={true} rowKey='id' style={{marginTop: '10px'}}
                     columns={this.state.columns}
                     dataSource={this.props.lists} pagination={false}/>
            }

          </Row>
          {
            this.state.addModalVisible ? <AddCustomerTypeModalUI showOrHiddenModalVisible={this.addModalVisiblefuc}/> : ''
          }
          {
            this.state.editModalVisible ? <EditCustomerTypeModalUI showOrHiddenModalVisible={this.editModalVisiblefuc} editRow={this.state.editRow}  /> : ''
          }
        </div>
      </MainUI>
    )
  };
}

function mapStateToProps(state) {
  return {
    lists: state.customerType.lists,
  }
}

export default connect(mapStateToProps)(CustomerType);
